<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>Banner
        </b>
        <div class="u-right u-5mt">
          <el-button type="success" size="small" icon="el-icon-document-checked" @click="submitForm('objForm')">提交保存
          </el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form :model="objForm" :rules="rules" ref="objForm" label-width="100px" class="u-form">
        <el-form-item label="显示区域">
          <el-select v-model="objForm.area" class="u-w-block">
            <el-option label="首页" value="index"></el-option>
            <!-- <el-option label="公司介绍" value="company"></el-option>
            <el-option label="公司首页" value="comindex"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="Banner标题" prop="banner_title">
          <el-input v-model="objForm.banner_title" placeholder="请输入Banner标题" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="跳转类型">
          <el-select v-model="objForm.jump_type" class="u-w-block">
            <el-option label="无跳转" :value="0"></el-option>
            <el-option label="商品页面" :value="1"></el-option>
            <el-option label="外部链接" :value="2"></el-option>
            <el-option label="图片详情" :value="3"></el-option>
            <el-option label="内部链接" :value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="跳转链接" v-show="objForm.jump_type == 2 || objForm.jump_type == 4">
          <el-input v-model="objForm.jump_link" placeholder="请输入跳转链接" maxlength="255" show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="商品id" v-show="objForm.jump_type == 1">
          <el-input v-model="objForm.goods_id" placeholder="商品id" maxlength="255" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="时间区间">
          <el-col :span="11">
            <el-date-picker type="datetime" value-format="timestamp" placeholder="生效时间" v-model="objForm.start_time"
              style="width: 100%"></el-date-picker>
          </el-col>
          <el-col class="line u-text-center" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker type="datetime" value-format="timestamp" placeholder="失效时间" v-model="objForm.end_time"
              style="width: 100%"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="上传图片" prop="banner_src">
          <upload file-folder="banner" :file-arr="fileList" list-type="picture-card" :limit="1"
            accept="image/jpeg, image/png" tips="只能上传jpg/png文件，且不超过4MB" @getUploadFiles="getUploadFiles"></upload>
        </el-form-item>
        <el-form-item label="视频" prop="video_url">
          <upload-video file-folder="companyVideo" :file-arr="fileListVideo" list-type="picture-article" :limit="1"
            accept="video/mp4" tips="只能上传mp4文件，且不超过200MB" @getUploadFiles="getUploadmp4Files"></upload-video>
        </el-form-item>
        <el-form-item label="banner详情" prop="banner_detail" v-show="objForm.jump_type == 3">
          <upload-drag file-folder="banner_detail" :file-arr="fileList2" :multiple="true" list-type="picture-card"
            :limit="31" accept="image/jpeg, image/png" tips="只能上传jpg/png文件，且不超过4MB" @getUploadFiles="bannerDetail">
          </upload-drag>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="objForm.rank" :min="0" label="数值越大权重越高"></el-input-number>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import UploadVideo from "@/components/upload/uploadvideo";
import Upload from "@/components/upload/upload";
import UploadDrag from "@/components/uploaddrag/uploaddrag";
export default {
  components: {
    Upload,
    UploadVideo,
    UploadDrag,
  },
  mixins: [commonEdit],
  data() {
    return {
      apiName: "banner",
      backRoute: "banner",
      fileListVideo: [],
      fileList: [],
      fileList2: [], //详情
      objForm: {
        id: "",
        banner_title: "",
        banner_src: "",
        banner_detail: "",
        jump_type: 0,
        jump_link: "",
        video_url:"",
        goods_id: 0,
        end_time: "",
        start_time: "",
        status: 1,
        rank: 0,
      },
      rules: {
        banner_title: [
          {
            required: true,
            message: "请输入Banner标题",
            trigger: "blur",
          },
          {
            max: 30,
            message: "最大长度30个字符",
            trigger: "blur",
          },
        ],
        banner_src: [
          {
            required: true,
            message: "请上传Banner图片",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getUploadmp4Files(files) {
      //封面上传回调
      this.fileListVideo = files;
      this.objForm.video_url = files[0]["url"];
    },
    bannerDetail(files) {
      //详情上传回调
      this.fileList2 = files;
      this.objForm.banner_detail = "";
      for (var i = 0; i < files.length; i++) {
        this.objForm.banner_detail +=
          this.objForm.banner_detail == "" ? files[i].url : "," + files[i].url;
      }
    },
    afterGetInfo() {
      if (this.objForm.banner_src) {
        this.fileList = [
          {
            name: "banner_src",
            url: this.objForm.banner_src,
          },
        ];
      }
      for (var j = 0; j < this.objForm.banner_detail.length; j++) {
        this.fileList2.push({
          url: this.objForm.banner_detail[j],
        }); //详情
      }
      if (this.objForm.video_url) {
        this.fileListVideo = [
          {
            url: this.objForm.video_url
          }
        ];
      }
    },
    getUploadFiles(files) {
      this.fileList = files;
      this.objForm.banner_src = files[0]["url"];
    },
  },
};
</script>
